<template>
  <div class="bar" ref="pieRef"></div>
</template>
<script setup>
import { ref, watch } from "vue";
import useChart from "@/hooks/useCharts";
import * as echarts from "echarts";

let props = defineProps({
  name: String,
  size: [String, Number],
  data: Number,
});

let baseOption = {
  series: [
    {
      name: "外围刻度",
      type: "gauge",
      radius: "105%",
      center: ["50%", "55%"],
      splitNumber: 5,
      startAngle: 210,
      endAngle: 330,
      axisLine: {
        lineStyle: {
          width: 1,
          color: [[1, "#00b3ff"]],
          shadowColor: "#fff",
          shadowBlur: 5,
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      detail: {
        show: false,
      },
      pointer: {
        show: false,
      },
    },
    {
      name: "内层数据刻度",
      type: "gauge",
      radius: "110%",
      center: ["50%", "55%"],
      splitNumber: 5,
      startAngle: 210,
      endAngle: 330,
      axisLine: {
        lineStyle: {
          width: 2,
          color: [
            [
              0,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#011744" },
                { offset: 1, color: "#18c8ff" },
              ]),
            ],
            [
              1,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "rgb(100 239 6)" },
                { offset: 1, color: "#18c8ff" },
              ]),
            ],
          ],
        },
      },
      splitLine: {
        length: 1,
        lineStyle: {
          width: 1,
          color: "#fff",
        },
      },

      axisTick: {
        splitNumber: 2,
        lineStyle: {
          color: "#00baff",
        },
      },
      axisLabel: {
        color: "#fff",
        fontSize: props.size / 2,
      },
      detail: {
        show: true,
        lineHeight: props.size + 2,
        color: "#fff",
        fontSize: props.size + 2,
        formatter: (c) => c + "\n" + props.name,
        offsetCenter: [0, 25],
      },
      pointer: {
        show: false,
      },
      itemStyle: {
        color: "#00baff",
      },
      pointer: {
        width: 4,
        length: "80%",
      },
      data: [{ value: props.data }],
    },
  ],
};

const pieRef = ref(null);
const { updateDraw } = useChart(pieRef, baseOption);

watch(
  () => props.data,
  (val) => {
    updateDraw({
      series: [{}, { data: [{ value: val }] }],
    });
  },
  { deep: true }
);
</script>
<style scoped lang="scss">
.bar {
  width: 100%;
  height: 100%;
}
</style>
